<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	
	<head>
		<meta http-equiv="Content-Language" content="en-gb" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Gradients" />
		<title>PDF Graphics .NET documentation - Gradients</title>
		<link rel="stylesheet" href="../style/Help.css" type="text/css" />
	
	</head>
	
	<body>
		<div class="navigator">
			<span>
				<strong>PDF Graphics .NET</strong> :: <a href="..\Index.html">Help</a> :: <a href="..\Painting_graphics.html">Painting graphics</a> :: Gradients
			</span>
		</div>
		
		<h1>Gradients</h1>
							
		<p>
			PDF Graphics .NET supports colour gradients through gradient brushes. Two types of gradient
			are supported, linear and radial. The following sections describe each of the types in detail.
			<ul>
				<li><a href="#LinearGradients">Linear gradients</a></li>
				<li><a href="#RadialGradients">Radial gradients</a></li>
				<li><a href="#Exponent">Controlling the transition: exponent</a></li>
			</ul>			
		</p>
			
		<h2><a name="LinearGradients"></a>Linear gradients</h2>

		<p>
			Graphics can be filled with a colour gradient by using a <span class="code">LinearGradientBrush</span> instance. To create
			a linear gradient brush, specify the start and end colour as well as the start and end coordinates, as in the following example.
		</p>
		
		<div class="sampleCode">LinearGradientBrush linear = new LinearGradientBrush(
    Rgb.Green, Rgb.Yellow, 10, 10, 60, 60);

g.FillRectangle(linear, new Rectangle(10, 10, 50, 50));</div>
		
		<p>
			The gradient brush is set up to use green and yellow as the start and end colour, and flow along a line defined by the
			coordinates (10,10) and (60,60). This corresponds to the rectangle that is then filled, because it has a top-left
			corner at (10,10) and width and height of 50 points.
		</p>
		
		<img src="../images/Gradient_linear.jpg" />
		
		<p>
			The coordinates for the gradient do not imply a bounding box. That is, painting a larger area with the same brush fills the entire
			area, just like with regular brushes. The start and end points define the scope of the colour transition, not of the brush itself:
		</p>

		<div class="sampleCode">LinearGradientBrush linear = new LinearGradientBrush(
    Rgb.Green, Rgb.Yellow, 10, 10, 60, 60);

g.FillRectangle(linear, new Rectangle(10, 10, 80, 80));</div>
		
		<p>
			In this sample, the rectangle is drawn larger. In its top-left hand corner, the fill colour is a gradient between yellow and green;
			for the rest of the rectangle, the colour is a uniform green. The rectangle extends beyond the range of the gradient.
		</p>
			
		<h3>Moving a gradient</h3>
		
		<p>
			A gradient is defined by start and end coordinates. That means its range is fixed to those coordinates. If the example above was
			altered to position the rectangle further down the page then it would not be painted with the gradient. If it's moved just a little
			bit, the gradient will seem offset. Moving the rectangle away far enough and it will be of a uniform colour:
		</p>

		<div class="sampleCode">LinearGradientBrush linear = new LinearGradientBrush(
    Rgb.Green, Rgb.Yellow, 10, 10, 60, 60);

g.FillRectangle(linear, new Rectangle(10, 10, 50, 50));

g.FillRectangle(linear, new Rectangle(70, 10, 50, 50));

g.FillRectangle(linear, new Rectangle(10, 70, 50, 50));

g.FillRectangle(linear, new Rectangle(70, 70, 50, 50));</div>

		<img src="../images/Gradient_Moved.jpg" />
		
		<p>
			In this example, four rectangles are painted using the same brush. Only the first rectangle receives the full gradient, since its
			bounding box matches that of the gradient.
		</p>
			
		<p>
			To move a gradient, use transformations. The above can be re-written as follows:
		</p>

		<div class="sampleCode">LinearGradientBrush linear = new LinearGradientBrush(
    Rgb.Green, Rgb.Yellow, 10, 10, 60, 60);

Rectangle bounds = new Rectangle(10, 10, 50, 50);

g.FillRectangle(linear, bounds);

g.TransformTranslate(60,0);
g.FillRectangle(linear, bounds);

g.TransformTranslate(-60,60);
g.FillRectangle(linear, bounds);

g.TransformTranslate(60,0);
g.FillRectangle(linear, bounds);</div>
			
		<p>
			Each of the four rectangles now receives a full gradient.
		</p>

		<img src="../images/Gradient_Translated.jpg" />
			
		<h2><a name="RadialGradients"></a>Radial gradients</h2>
		
		<p>
			A radial gradient is painted with the <span class="code">RadialGradientBrush</span> class. Given a
			bounding box, it will paint an elliptic gradient, with the start colour in the center and the end
			colour at the edge of the ellipse. Again, the gradient is bound to its start and end coordinates,
			and transformations can be used to move it around.
		</p>
					
		<p>
			The previous example of four rectangles can be altered to use a radial gradient:
		</p>
		
		<div class="sampleCode">RadialGradientBrush radial = new RadialGradientBrush(
    Rgb.Red, Rgb.Blue, 10, 10, 60, 60);

Rectangle bounds = new Rectangle(10, 10, 50, 50);

g.FillRectangle(radial, bounds);

g.TransformTranslate(60,0);
g.FillRectangle(radial, bounds);

g.TransformTranslate(-60,60);
g.FillRectangle(radial, bounds);

g.TransformTranslate(60,0);
g.FillRectangle(radial, bounds);</div>
		
		<img src="../images/Gradient_Radial.jpg" />

		<h2><a name="Exponent"></a>Controlling the transition: exponent</h2>
		
		<p>
			By default, linear and radial gradients perform a straight transition between the start and end colour; 
			halfway down, the colour will be exactly between the two endpoint colours. It is possible to change this
			transition to follow a convex or concave curve, and thereby alter the gradient. The following example
			illustrates this:
		</p>

		<div class="sampleCode">Font font = new Font("Times New Roman");

Brush exponent1 = new LinearGradientBrush(
    Rgb.White, Rgb.Black, 10, 10, 60, 60, 0.7f);

g.FillRectangle(exponent1, new Rectangle(10, 10, 50, 50));
g.DrawString(Rgb.BlackBrush, "Exponent 0.7", font, 8, 10, 70);

Brush exponent2 = new LinearGradientBrush(
    Rgb.White, Rgb.Black, 70, 10, 120, 60, 1f);

g.FillRectangle(exponent2, new Rectangle(70, 10, 50, 50));
g.DrawString(Rgb.BlackBrush, "Exponent 1", font, 8, 70, 70);

Brush exponent3 = new LinearGradientBrush(
    Rgb.White, Rgb.Black, 130, 10, 180, 60, 1.7f);

g.FillRectangle(exponent3, new Rectangle(130, 10, 50, 50));
g.DrawString(Rgb.BlackBrush, "Exponent 1.7", font, 8, 130, 70);</div>

		<img src="../images/Gradient_Exponent.jpg" />
			
		<h3><strong>Navigation options:</strong></h3>
		<p><a href="Transformations.html">&lt; Transformations</a> | <a href="Clipping.html">Clipping &gt;</a>
		
	</body>
	
</html>